<template>
  <div>
    <el-form :model="form" label-width="96px" ref="ruleForm" :rules="rules">

      <div class="from-heard">
        <div class="iconTitle">
          公司形象 :
        </div>

        <div class="fromIcon">
          <el-upload action="/api/upload" :show-file-list="false" :limit="1" :on-success="handleSuccessotherimg"
            :before-upload="beforeUpload">
            <img class="upImg" v-if="!form.image" src="../../../../../static/engineering5188/supplier/CorporateImage.png" />
            <img class="upImg" v-else :src="form.image" />
          </el-upload>
        </div>

        <div>
          <div class="huiyuanText" >
            <span v-if="form.level_year">会员年限：{{form.level_year}}年</span>
            <div class="huiyuantada" v-if="form.level_time"> <img src="../../../../../static/engineering5188/supplier/drill.png" alt="">
              还有{{form.level_time}}天到期</div>
          </div>
          <el-button class="xufeiButton" type="primary" @click="openChongzhi">立即续费</el-button>
          <el-button class="payButton" type="warning" v-if="shopInfo.beFx == 0" @click="applayData">申请成为分销商</el-button>
        </div>
        <div v-if="userInfo.beFx == 2">
          <div class="huiyuanText" >
            邀请码：{{ invitationCode }}
          </div>
          <el-button class="payButton" type="warning" @click="newShareOn">我要邀请</el-button>
        </div>
      </div>

      <el-form-item label="公司名称 : " prop="company_title" >
        <el-input class="from-input" v-model="form.company_title"></el-input>
      </el-form-item>
      <el-form-item label="所在地区 : " prop="region" >
        <el-cascader class="from-input"  v-model="form.region" :options="regionOptions" :props="regionProps"></el-cascader>

      </el-form-item>
      <el-form-item label="详细地址 : " prop="address" >
        <el-input class="from-input" v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名 : " prop="name" >
        <el-input class="from-input" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码 : " prop="mobile" >
        <el-input class="from-input" v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="联系电话 : " prop="contact_phone">
        <el-input class="from-input" v-model="form.contact_phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱 : " prop="email">
        <el-input class="from-input" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="传真 : " prop="fax">
        <el-input class="from-input" v-model="form.fax"></el-input>
      </el-form-item>
      <el-form-item label="公司简介 : " prop="company_info">
        <!-- <el-input :autosize="{ minRows: 20 }" class="from-input" type="textarea" v-model="form.company_info"></el-input> -->
        <quill-editor v-model="form.company_info" :options="editorOption" class="quill-editor-custom" ></quill-editor>
      </el-form-item>
      <div style="margin-left:96px;margin-bottom:20px">资料越完善，诚信分值越高，获得订单的几率越高
      </div>
      <el-form-item>
        <el-button class="btnColse" @click="cancel">取消</el-button>
        <el-button class="btnPay" type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
    <NewPayment ref="NewPayment"></NewPayment >
    <!-- 分享 -->
    <newShare ref="newShare"></newShare>
  </div>
</template>

<script>
import { mapState } from "vuex";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import NewPayment  from './newPayment.vue'
import newShare from "../../newShare.vue";

export default {
  name: "basicData",
  components: {
    quillEditor,
    NewPayment ,
    newShare
  },
  data() {
    return {
      invitationCode:'',
      shopInfo: {},
      form: {
        company_title: '',
        region: [],
        address: '',
        name: '',
        mobile: '',
        contact_phone: '',
        email: '',
        fax: '',
        company_info: '',
      },
      rules:{
        company_title: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
      },
      regionOptions: [
      ],
      regionProps: {
        value: 'id',
        label: 'name',
        children: 'child'
      },
      editorOption: {
        // Quill 编辑器的配置选项
        theme: 'snow', // 主题，可选择 'snow' 或 'bubble'
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗、斜体、下划线、删除线
            ['blockquote', 'code-block'], // 引用、代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题 1、标题 2
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表、无序列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 下标、上标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文字方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题级别
            [{ 'color': [] }, { 'background': [] }], // 文字颜色、背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        }
      }
    }
  },
  computed: {
        ...mapState([
            "userInfo",
        ]),
    },
  created() {
    this.getData();
    this.getRegion();
    this.getShareData();
  },
  methods: {
    getShareData(){
      this.$httpApi("/api/share", {
        token: this.userInfo.token,
      },'get').then(res => {
        this.invitationCode = res.data.code;
      })
    },
    newShareOn() {
      this.$refs.newShare.isVisible = true;
    },
    openChongzhi(){
      this.$refs.NewPayment.setVisible();
    },
    //用户信息获取【userInfo】加了beFx参数：1申请 2审核通过 -1审核未通过

    applayData(){
      this.$httpApi("/api/toBeAgent", {
        token: this.userInfo.token
      },'get').then(res=>{
        if(res.code == 200){
          this.getData();
        }else {
          alertErr(res.msg)
        }
        
      })
    },
    getRegion(){
      this.$httpApi("/api/getArea", {
        parentId:0
      },'get').then(res=>{
        this.regionOptions = res.data;
        console.log(res)
      })
    },
    getData(){
      this.$httpApi("/api/userInfo", {
        token: this.userInfo.token
      },'get').then(res=>{
        console.log(res)
        this.shopInfo = res.data.userInfo;
        if(res.data.userInfo.provinceId){
          res.data.userInfo.region = [res.data.userInfo.provinceId,res.data.userInfo.cityId,res.data.userInfo.areaId]
        }
        this.form = res.data.userInfo;
      })
    },
    beforeUpload(file) {
      // 上传前的处理逻辑，比如文件大小限制等
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过10MB!');
      }
      return isLt2M;
    },

    handleSuccessotherimg(response, file, fileList) {
      this.form.image = response.data.path
    },

    cancel() {
      console.log('触发取消操作');
      // 可添加重置表单等逻辑
    },
    save() {
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$httpApi("/api/baseInfoSave", {
              company_title: this.form.company_title,
              address: this.form.address,
              name: this.form.name,
              mobile: this.form.mobile,
              contact_phone: this.form.contact_phone,
              email: this.form.email,
              fax: this.form.fax,
              company_info: this.form.company_info,
              image: this.form.image,
              token: this.userInfo.token,
              // 区域的信息
              provinceId:this.form.region.length>0?this.form.region[0]:'',
              cityId:this.form.region.length>0?this.form.region[1]:'',
              areaId:this.form.region.length>0?this.form.region[2]:'',
            },'post').then(res=>{
              if(res.code == 200){
                alertSucc('保存成功');
              }else{
                alertErr(res.msg)
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>

<style lang="less" scoped>
/* 其他样式 */
/deep/  .quill-editor-custom .ql-container {
  height: 300px !important; 
}
.btnPay {
  width: 133px;
  height: 40px;
  background: #0052D9;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 0, 0, 0);

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;

  font-style: normal;
  text-transform: none;
}

.btnColse {
  width: 133px;
  height: 40px;
  background: #F5F5F5;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #D7D7D7;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #666666;

  font-style: normal;
  text-transform: none;
}

/deep/ .el-textarea__inner {
  width: 930px;
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
}

/deep/ .el-input__inner {
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
}

.from-input {
  width: 630px;
  min-height: 44px;

}

.huiyuantada {
  width: 130px;
  height: 24px;
  background: #FF7400;
  border-radius: 100px 100px 100px 100px;
  font-family: Arial, Arial;
  font-weight: bold;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  font-style: normal;
  text-transform: none;
  line-height: 24px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.huiyuantada img {
  width: 15px;
  height: 13px;
  margin-right: 2px;
}

.huiyuanText {
  display: flex;
  align-items: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  line-height: 21px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 24px;
  margin-bottom: 16px;
  margin-right: 26px;

}

.payButton {
  width: 133px;
  height: 36px;
  background: #FF7400;
  border-radius: 30px 30px 30px 30px;
  border: 1px solid #FF7400;

  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;

  font-style: normal;
  text-transform: none;
}

.xufeiButton {
  width: 112px;
  height: 36px;
  background: #EFF4FD;
  border: 1px solid #0052D9;
  border-radius: 18px;

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052D9;
  margin-left: 24px;
  font-style: normal;
  text-transform: none;
}

.iconTitle {

  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 24px;
  text-align: right;
  font-style: normal;
  text-transform: none;
}

.fromIcon {
  padding-left: 16px;
}

.from-heard {
  padding: 20px 28px;
  display: flex;
  align-items: center;
  align-items: flex-end;
}

.upImg {
  width: 120px;
  height: 70px;
}
</style>